<template>
  <table class="table_box" border="0" cellspacing="0" cellpadding="0" width="100%">
    <tbody>
      <template v-for="(item, index) in data">
        <!--//名称和值，竖排-->
        <template v-if="item.labelHeader">
          <tr :key="index" :alt="index">
            <template v-for="(obj, i) in item.fieldParameter">
              <td v-if="item.rowspan && item.rowlabel && i===0" :rowspan="item.rowspan" class="label" :key="'a'+i">{{ item.rowlabel }}</td>
              <td class="label" :colspan="obj.colspan" :key="'b'+i">{{ obj.label }}</td>
            </template>
          </tr>
          <tr :key="'j'+index" :alt="'j'+index">
            <template v-for="(obj, i) in item.fieldParameter">
              <td class="value" :colspan="obj.colspan" :key="i">
                {{ infoData[obj.field]?infoData[obj.field]: '--' }}
              </td>
            </template>
          </tr>
        </template>
        <!--//名称和值，横排-->
        <template v-else>
          <tr :key="index" :alt="index">
            <template v-for="(obj, i) in item.fieldParameter">
              <td v-if="item.rowspan && item.rowlabel && !item.labelHeader && i===0" :rowspan="item.rowspan" class="label" :key="'a'+i">{{ item.rowlabel }}</td>
              <td class="label" :key="'b'+i">{{ obj.label }}</td>
              <td class="value" :colspan="obj.colspan" :key="'c'+i">
                {{ infoData[obj.field]?infoData[obj.field]: '--' }}
              </td>
            </template>
          </tr>
        </template>
      </template>
    </tbody>
  </table>
</template>
<script>
export default {
  props: {
    data: Array,
    infoData: Object
  }
}
</script>
<style lang="less" scoped>
.work-break {
  word-wrap: break-word;
  display: inline-block;
  width: 15px;
  word-break: break-all;
  padding: 10px 0;
}
.table_box {
  border-top: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  tr {
    height: 35px;
    td {
      min-width: 100px;
      text-align: center;
      padding: 14px 0px;
      font-size: 14px;
      color: #555;
      border-bottom: 1px solid #d9d9d9;
      border-left: 1px solid #d9d9d9;
      &.label {
        background-color: #fafafa;
        // .work-break()
      }
      // &.value {
        // .work-break()
      // }
    }
  }
}
</style>
